<template>
	<div class="person">
        <h2>当前数值：{{ msgRef }}</h2>
		<input type="text" v-model="msgRef">
    </div>
</template>


<script setup lang="ts" name="App">
	import { ref } from 'vue';
	import useMsgRef from './hooks/useMsgRef'
	let msg = '你好'

	// 使用hook useMsgRef中的customRef实现延迟更新的效果
	let msgRef = useMsgRef('你好', 1000)
	
	
	
</script>

<style>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>